<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/static/pic/public/logo.png" />
    <title>PhpMethod login</title>

    <link rel='stylesheet' id='bootstrap-css-css' href='/static/knowledge/css/bootstrap.min.css' type='text/css' media='all'/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="user-login ">
<style>
    .panel {width: 600px}
    @media(max-width: 600px) {
        .panel {width: 100%}
    }
    .error-data{color:red;}
</style>
<div class="container">
    <div class="header text-center">
        <h1>
            <a href="/" class="logo">
                Knowledge Base
            </a>
        </h1>
        <p class="description text-muted">欢迎来到专业的中文开发者社区</p>
    </div>
    <div class="panel panel-default center-block">
        <div class="panel-heading">
            <h3 class="panel-title">登录</h3>
        </div>
        <div class="panel-body sfModal-content">
            <div class="row bg-white login-modal">
                <div class="col-md-12 login-wrap">
                    <form id="fm" method="POST" role="form" class="mt15" onsubmit="return false;">
                        <div class="form-group hidden">
                            {:token()}
                        </div>
                        <div class="form-group">
                            <label for="phone_email" class="control-label">手机号 或 邮箱</label>
                            <input id="phone_email" type="text" class="form-control" name="phone_email" tabindex="1" placeholder="11 位手机号 或 Email" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="password" class="control-label">密码</label><span class="pull-right"><a href="/user/forgot" tabindex="4">忘记密码</a></span>
                            <input id="password" type="password" class="form-control" name="password" tabindex="2" placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <a href="/user/phoneLogin">手机验证码登录</a>
                        </div>
                        <div class="form-group clearfix">
                            <button type="submit" id="logging" class="btn-block btn btn-primary pull-right pl20 pr20" tabindex="3" >登录
                            </button>
                        </div>
                        <div class="form-group error-data"></div>
                    </form>
                    <div class="text-muted text-center more-login-area">
                        <span class="more-login-words">更多登录方式</span>
                    </div>
                    <div class="form-group clearfix">
                        <a class="btn-block btn btn-default pull-right pl20 pr20" href="{:url('register')}">
                            注册新账号
                        </a>
                    </div>
                    <p class="text-muted text-center mb15">登录即表示你同意网站的<a href="#" target="_blank">《服务条款》</a></p></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="/static/knowledge/js/bootstrap.min.js"></script>
<script>
    $("#logging").click(function(){

        $.post('{:url("user/sign")}', $('#fm').serialize(), function(res){
            console.log(res)
            if(res.code != 200){

                if (('phone_email' in res.msg) || ('password' in res.msg)) {
                    $('.error-data').text('用户名密码错误')
                }

                if('__token__' in res.msg){
                    $('.error-data').text('正在拼命加载中>>>>请刷新本页面后重试')
                }

                $("input[name=__token__]").val(res.token);
            }else{
                location.href = "{:url('index')}";
            }
        });
    });
</script>
</html>